
<template>
  <div class="layout-container">
    <!-- 左侧导航栏 -->
    <div class="sidebar-container">
      <el-button  round type="success" class="goFront" @click="goFront">goFront</el-button>
      <!-- 收缩切换按钮 -->
      <div class="toggle-container">
        <el-radio-group v-model="isCollapse" size="small">
          <el-radio-button :value="false" >Expand</el-radio-button>
          <el-radio-button :value="true"  >Collapse</el-radio-button>
        </el-radio-group>
      </div>

      <!-- 导航菜单 -->
      <el-menu
        router
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        :default-active=routeKey
        @open="handleOpen"
        @close="handleClose"
      >
        <!-- 子菜单 -->
        <!-- <el-sub-menu >
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item index="/index">Item One</el-menu-item>
          <el-menu-item >Item Two</el-menu-item>
        </el-sub-menu> -->

        <!-- 单独的菜单项 -->
        <el-menu-item index="/manager/index">
          <el-icon><icon-menu /></el-icon>
          <span>manager index</span>
        </el-menu-item>
        <el-menu-item index="/manager/armors" >
          <el-icon><document /></el-icon>
          <span>manager armors</span>
        </el-menu-item>
        <el-menu-item index="/manager/firearms">
          <el-icon><setting /></el-icon>
          <span>manager firearms</span>
        </el-menu-item>
          <el-menu-item index="/manager/materials">
          <el-icon><setting /></el-icon>
          <span>manager materials</span>
        </el-menu-item>
          <el-menu-item index="/manager/roomCard">
          <el-icon><setting /></el-icon>
          <span>manager roomCard</span>
        </el-menu-item>
          <el-menu-item index="/manager/expansionBox">
          <el-icon><setting /></el-icon>
          <span>manager expansionBox</span>
        </el-menu-item>
          <el-menu-item index="/manager/tqc">
          <el-icon><setting /></el-icon>
          <span>manager tqc</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 主内容区域 -->
    <div class="content-container">
         <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'; // 按需导入图标
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import router from '@/router'
const route = useRoute()
const isCollapse = ref(false) // 控制菜单的展开和收缩状态

let routeKey = ref<string>(route.path)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  routeKey.value = key;
}
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}

const goFront = () => {
  router.push({
    path: '/'
  })
}

watch(() => route.path, (newPath) => {
  routeKey.value = newPath
})

const handTabPage = () => {
  //刷新返回初始页面
    router.push({
      path: '/manager/index'
    })
    routeKey.value = '/manager/index'
}




onMounted(() => {
  handTabPage()
})

</script>

<style scoped>
/* 布局容器 */
.layout-container {
  /* background-color: #bfa;   */
 /* display: flex;  Flex布局，左侧导航栏和右侧内容并列 */
  height: 98vh; /* 占满整个屏幕高度 */
  width: 100%;
     box-shadow:  0 -2px 5px rgba(0, 0, 0, 0.1); 
}

/* 左侧导航栏 */
.sidebar-container {
  position: fixed; /* 固定在左侧 */
  left: 0;
  top: 0;
  bottom: 0;
  width: 20%; /* 宽度占屏幕五分之一 */
  max-width: 250px; /* 限制最大宽度 */
  background-color: #f5f5f5; /* 背景色 */
  border-right: 1px solid #ddd; /* 添加右侧边框 */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  display: flex;
  flex-direction: column; /* 垂直布局 */
  align-items: center; /* 水平居中 */
  padding: 10px 0; /* 内边距 */
  box-sizing: border-box; /* 包括边框计算宽度 */
}



/* 收缩切换按钮 */
.toggle-container {
  width: 100%; /* 占满导航栏宽度 */
  padding: 10px; /* 内边距 */
  text-align: center; /* 内容居中 */
  border-bottom: 1px solid #ddd; /* 底部分割线 */
  margin-bottom: 10px; /* 与菜单分隔 */
}

/* 菜单样式 */
.el-menu-vertical-demo {
  flex: 1; /* 填充剩余的垂直空间 */
  width: 100%; /* 占满导航栏宽度 */
  overflow-y: auto; /* 超出内容时显示滚动条 */
  border: none; /* 去掉默认边框 */
  background-color: #ffffff; /* 菜单背景颜色 */
}

/* 菜单项样式 */
.el-menu-item, .el-sub-menu__title {
  font-size: 14px; /* 字体大小 */
  padding: 10px 20px; /* 内边距 */
}

/* 鼠标悬停时的样式 */
.el-menu-item:hover, .el-sub-menu__title:hover {
  background-color: #ecddff; /* 浅蓝色背景e6f7ff */
  color: #c971ff; /* 蓝色文字 1890ff*/
}

/* 激活状态样式 */
.el-menu-item.is-active {
  background-color: #e5caff; /* 激活状态背景色 bae7ff*/
  color: #c971ff; /* 激活状态文字颜色096dd9 */
}

/* 收缩状态时的样式 */
.el-menu--collapse .el-menu-item,
.el-menu--collapse .el-sub-menu__title {
  text-align: center; /* 收缩状态文字居中 */
  padding: 10px; /* 减少内边距 */
}

/* 主内容区域 */
.content-container {
  /* width: 500px; */
  margin-left: 250px; /* 主内容区域让出导航栏的宽度 */
  padding: 3px; /* 内边距 */
   flex: 1;/* 填充剩余的水平空间 */
  background-color: rgb(222, 243, 255); /* 背景色 */
  height: 100%; /* 占满屏幕高度 */
  box-sizing: border-box; /* 包括边框计算宽度 */
   box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); 
}


</style>